<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .nav {
            width: 100%;
            height: 100px;
            background-color: #000;
        }
        .nav .main_nav{
            width: 1000px;
            height: 100%;
            margin: 0 auto;
            position: relative;
        }
        .nav ul {
            width: 100%;
            height: 100%;
        }

        .nav ul li {
            width: 125px;
            height: 100%;
            text-align: center;
            line-height: 100px;
            float: left;

        }

        .nav ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 20px;
        }

        .nav ul li.active a {
            color: #00DFB9;
        }
        .nav ul li:hover a {
            color: #00DFB9;
        
        }
        .line{
            width: 55px;
            height: 3px;
            position: absolute;
            left:35px;
            top: 10px;
            background-color:#00DFB9 ;
        }
    </style>
</head>

<body>

    <div class="nav">
        <div class="main_nav">
            <span class="line"></span>
            <ul>
                <li class="active">
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">业务</a>
                </li>
                <li>
                    <a href="javascript:;">案例</a>
                </li>
                <li>
                    <a href="javascript:;">客户</a>
                </li>
                <li>
                    <a href="javascript:;">品质</a>
                </li>
                <li>
                    <a href="javascript:;">增值</a>
                </li>
                <li>
                    <a href="javascript:;">关于</a>
                </li>
                <li>
                    <a href="javascript:;">联系</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 引入缓慢动画 -->
    <script src="js/animate.js"></script>
    <script>
        //1.
       var line=document.querySelector('.line');
      var lis= document.querySelectorAll('.main_nav ul li');
      console.log(lis);

        //2.
        var current=35;
        for(var i=0;i<lis.length;i++){
             lis[i].onmouseenter=function(){
                //  console.log('aaa');
                animate(line, this.offsetLeft+35)

             }
             lis[i].onmouseleave=function(){
                // console.log('bbb');
                animate(line, current)
            }
            lis[i].onclick=function(){
                // console.log('ccc');
                current=this.offsetLeft+35;
                //整个文档中查找，带active   只有一项 移掉
                document.querySelector('.main_nav ul li.active').classList.remove('active');
                // 当前项增加 active
                this.classList.add('active');
                
            }
        }
        //                 getComputedStyle(box,null).left 
        //  123px-----123    box.style.left  行内   还带单位            parseFloat(123px)---123
    </script>
</body>

</html>